<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'demo-JqueryAjaxSelect.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!-- jquery.js -->	
	<script type="text/javascript" src="/js/jquery/jquery-1.4.4.js"></script>
	<script type="text/javascript" src="/js/selectUtil.js"></script>
	<link href="/style/selectUtil.css" rel="stylesheet" type="text/css" />
	
  </head>
  
  <body>
    <h1>
    <br>Jquery Ajax 下拉框使用说明. <br>
    </h1> 
    
    <div>
    <h2>
    好处：<br>
    </h2>
    1、支持数据字典、对象集合自动转换为下拉框<br>
    2、实现了异步下拉框<br>
    3、实现多级联动<br>
    4、实现多级联动初始化<br>
    5、减少了下拉框的耦合，一处开发，多处使用<br>

	<h2>
    使用说明:<br>
	</h2>    
    1、在com.licaiedu2.ajax.licaiedu.AjaxSelectOptionsAction,写入获取下拉框数据的方法<br> 
	    public String ajaxCourses(){<br>
	    	//1 获取数据<br>
	    	//2 指定 select option : text \value<br>
	    	//3 自动转换为通用selectOption 对象，并以json返回<br>
	    };<br>
    2、jsp页面<br>
    	2.1、引用jquery.js\selectUtil.js\selectUtil.css<br>
    	2.2、使用<br>
    		JqajaxSelect.initSelectAll(selectId, ajaxUrl, currentOptionValue);<br>
    			——————————ajax 获取 select 数据（selectId默认为根）<br>
    		JqajaxSelect.bindLinkSelect(selectId, sonSelectId, ajaxSonDataUrl, linkName,linkOrder, currentSonOptionValue);<br>
    			——————————ajax 联动获取父级 select 数据（selectId为父级，sonSelectId为当前）<br>
    
    </div>
    
    <div >
    	<h2>
    	实例：
    	</h2>
	    <!-- ajax -->
	    <ul>
	    	<li>数据字典</li>
			<li>ajax status :<select  name="query.query['status@i']" id="ajax_status"  ></select></li>
		 	<li>ajax testType :<select  name="query.query['testType@i']"   id="ajax_testType"  ></select></li>
			<li>ajax questionType :<select name="query.query['questionType@i']"  id="ajax_questionType"  ></select></li>
	    </ul>
	    <ul>
			<li>数据对象</li>
			<li>ajax 课程:<select name="query.query['course.id@l']" id="ajax_course"  ></select></li>
			<li>ajax 知识点:<select name="query.query['knowledge.id@l']" id="ajax_knowledge"  ></select></li>
		</ul>	
		
		
	    <ul>
	    	<li>数据字典(默认值)</li>
			<li>ajax status :<select  name="query.query['status@i']" id="ajax_status_de"  ></select></li>
		 	<li>ajax testType :<select  name="query.query['testType@i']"   id="ajax_testType_de"  ></select></li>
			<li>ajax questionType :<select name="query.query['questionType@i']"  id="ajax_questionType_de"  ></select></li>
			<input type="button" value="初始化当前下拉框，默认选中。" onclick="init1();">适用场景：1、修改对象信息，默认选中；2、查询并分页，加载上次查询条件
	    </ul>
		
		<ul>
			<li>数据对象(默认值)</li>
			<li>ajax 课程:<select name="query.query['course.id@l']" id="ajax_course_de"  ></select></li>
			<li>ajax 知识点:<select name="query.query['knowledge.id@l']" id="ajax_knowledge_de"  ></select></li>
			<li>
				<input type="button" value="初始化当前下拉框，默认选中。" onclick="init2();">适用场景：1、修改对象信息，默认选中；2、查询并分页，加载上次查询条件
			</li>
		</ul>	
		
		
    </div>
    
    
    
	
	<SCRIPT type="text/javascript">
	$("document").ready(function (){
		//数据字典
		JqajaxSelect.initSelectAll("ajax_status","/ajax/all/ajaxDataDictQuestionCheckStatus.jspa","");
		JqajaxSelect.initSelectAll("ajax_testType","/ajax/all/ajaxDataDictQuestionTestType.jspa","");
		JqajaxSelect.initSelectAll("ajax_questionType","/ajax/all/ajaxDataDictQuestionQuestionType.jspa","");
		
		
		// 打开调式消息模式
		// 默认为：colse debug，只需要屏蔽 JqajaxSelect.openDebug();，便可返回close debug
		JqajaxSelect.openDebug();
		// 初始化联动菜单
		JqajaxSelect.initSelectAll("ajax_course","/ajax/all/ajaxCourseAJAX.jspa","");
		JqajaxSelect.bindLinkSelect("ajax_course","ajax_knowledge","/ajax/all/ajaxCourseKnowledgeAJAX.jspa","ajax_course",1,"");
		
		JqajaxSelect.finsh();
	});	
	
	
	function init1 (){
		//数据字典
		JqajaxSelect.initSelectAll("ajax_status_de","/ajax/all/ajaxDataDictQuestionCheckStatus.jspa","351305");
		JqajaxSelect.initSelectAll("ajax_testType_de","/ajax/all/ajaxDataDictQuestionTestType.jspa","351101");
		JqajaxSelect.initSelectAll("ajax_questionType_de","/ajax/all/ajaxDataDictQuestionQuestionType.jspa","351202");
	
	}
	
	function init2 (){
		JqajaxSelect.initSelectAll("ajax_course_de","/ajax/all/ajaxCourseAJAX.jspa","1");
		JqajaxSelect.bindLinkSelect("ajax_course_de","ajax_knowledge_de","/ajax/all/ajaxCourseKnowledgeAJAX.jspa","ajax_course_de",1,"1");
//		<s:property value="question.knowledge.di"/>
		
	}
	</SCRIPT>
			
    
    <div>
    	<h2>
			引用资源:
    	</h2>
	
		<ul>
			<li>	
				jquery 基础核心js包:<br>
				script type=text/javascript src=/js/jquery/jquery-1.4.4.js
			</li>
			<li>	
				自定义封装 ajax select js包:<br>
				script type=text/javascript src=/js/selectUtil.js
			</li>
			<li>	
				自定义封装 ajax select css包:<br>
				script type=text/javascript src=/style/selectUtil.css
			</li>
		</ul>
	</div>
  </body>
</html>
